<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import userService from '../services/userService'

const router = useRouter()
const isMenuOpen = ref(false)

// 计算当前用户信息
const currentUser = computed(() => userService.getCurrentUser())
const isAuthenticated = computed(() => !!currentUser.value)

// 处理登出
const handleLogout = () => {
  userService.logout()
}

// 处理菜单点击
const handleMenuClick = (path: string) => {
  router.push(path)
  isMenuOpen.value = false
}
</script>

<template>
  <header class="header">
    <div class="container header-container">
      <!-- Logo -->
      <div class="logo" @click="handleMenuClick('/')">
        <h1>海龟汤AI</h1>
      </div>
      
      <!-- 桌面端导航 -->
      <nav class="nav-desktop">
        <ul class="nav-list">
          <li><a href="/" @click.prevent="handleMenuClick('/')">首页</a></li>
          <li><a href="/rooms" @click.prevent="handleMenuClick('/rooms')" v-if="isAuthenticated">游戏房间</a></li>
          <li><a href="/leaderboard" @click.prevent="handleMenuClick('/leaderboard')" v-if="isAuthenticated">排行榜</a></li>
          <li><a href="/chat" @click.prevent="handleMenuClick('/chat')" v-if="isAuthenticated">聊天室</a></li>
        </ul>
      </nav>
      
      <!-- 用户操作区 -->
      <div class="user-actions">
        <!-- 未登录状态 -->
        <div v-if="!isAuthenticated" class="auth-buttons">
          <button @click="handleMenuClick('/login')">登录</button>
          <button @click="handleMenuClick('/register')">注册</button>
        </div>
        
        <!-- 已登录状态 -->
        <div v-else class="user-menu">
          <div class="user-info" @click="isMenuOpen = !isMenuOpen">
            <img :src="currentUser?.avatar || 'https://via.placeholder.com/40'" alt="用户头像" class="avatar">
            <span class="username">{{ currentUser?.nickname || currentUser?.username }}</span>
            <span class="arrow" :class="{ 'rotate': isMenuOpen }">▼</span>
          </div>
          
          <!-- 用户下拉菜单 -->
          <div class="dropdown-menu" v-if="isMenuOpen">
            <a href="/profile" @click.prevent="handleMenuClick('/profile')">个人中心</a>
            <a href="/soup/my" @click.prevent="handleMenuClick('/soup/my')">我的海龟汤</a>
            <a href="/achievements" @click.prevent="handleMenuClick('/achievements')">成就</a>
            <div class="divider"></div>
            <a href="#" @click.prevent="handleLogout">退出登录</a>
          </div>
        </div>
      </div>
      
      <!-- 移动端菜单按钮 -->
      <div class="mobile-menu-btn">
        <button @click="isMenuOpen = !isMenuOpen" class="menu-toggle">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div class="mobile-menu" v-if="isMenuOpen">
      <ul>
        <li><a href="/" @click.prevent="handleMenuClick('/')">首页</a></li>
        <li v-if="isAuthenticated"><a href="/rooms" @click.prevent="handleMenuClick('/rooms')">游戏房间</a></li>
        <li v-if="isAuthenticated"><a href="/leaderboard" @click.prevent="handleMenuClick('/leaderboard')">排行榜</a></li>
        <li v-if="isAuthenticated"><a href="/chat" @click.prevent="handleMenuClick('/chat')">聊天室</a></li>
        <li v-if="isAuthenticated"><a href="/profile" @click.prevent="handleMenuClick('/profile')">个人中心</a></li>
        <li v-if="isAuthenticated"><a href="/soup/my" @click.prevent="handleMenuClick('/soup/my')">我的海龟汤</a></li>
        <li v-if="isAuthenticated"><a href="/achievements" @click.prevent="handleMenuClick('/achievements')">成就</a></li>
        <li v-if="isAuthenticated" class="logout-item"><a href="#" @click.prevent="handleLogout">退出登录</a></li>
        <li v-if="!isAuthenticated"><a href="/login" @click.prevent="handleMenuClick('/login')">登录</a></li>
        <li v-if="!isAuthenticated"><a href="/register" @click.prevent="handleMenuClick('/register')">注册</a></li>
      </ul>
    </div>
  </header>
</template>

<style scoped>
.header {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.logo {
  cursor: pointer;
}

.logo h1 {
  font-size: 24px;
  color: #1890ff;
  margin: 0;
}

/* 桌面端导航 */
.nav-desktop {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 24px;
}

.nav-list a {
  color: #333;
  font-size: 16px;
  transition: color 0.3s;
}

.nav-list a:hover {
  color: #1890ff;
}

/* 用户操作区 */
.user-actions {
  display: flex;
  align-items: center;
}

.auth-buttons {
  display: flex;
  gap: 8px;
}

.auth-buttons button {
  padding: 6px 16px;
}

.auth-buttons button:first-child {
  background-color: #fff;
  color: #1890ff;
  border: 1px solid #1890ff;
}

.auth-buttons button:first-child:hover {
  background-color: #e6f7ff;
}

/* 用户菜单 */
.user-menu {
  position: relative;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-info:hover {
  background-color: #f5f5f5;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.username {
  font-size: 14px;
}

.arrow {
  font-size: 12px;
  transition: transform 0.3s;
}

.arrow.rotate {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 160px;
  z-index: 1001;
}

.dropdown-menu a {
  display: block;
  padding: 10px 16px;
  color: #333;
  font-size: 14px;
  transition: background-color 0.3s;
}

.dropdown-menu a:hover {
  background-color: #f5f5f5;
}

.divider {
  height: 1px;
  background-color: #f0f0f0;
  margin: 4px 0;
}

/* 移动端菜单 */
.mobile-menu-btn {
  display: none;
}

.mobile-menu {
  display: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-desktop {
    display: none;
  }
  
  .auth-buttons {
    display: none;
  }
  
  .mobile-menu-btn {
    display: block;
  }
  
  .menu-toggle {
    width: 32px;
    height: 24px;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
  }
  
  .menu-toggle span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s;
  }
  
  .menu-toggle span:nth-child(1) {
    top: 0;
  }
  
  .menu-toggle span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }
  
  .menu-toggle span:nth-child(3) {
    bottom: 0;
  }
  
  .mobile-menu {
    display: block;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  .mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .mobile-menu li a {
    display: block;
    padding: 12px 20px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .mobile-menu li a:hover {
    background-color: #f5f5f5;
  }
  
  .logout-item {
    margin-top: 8px;
  }
  
  .logout-item a {
    color: #ff4d4f !important;
    border-bottom: none;
  }
}
</style>